<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="author" content="金西振">
  <title></title>
  <style>
    .list{
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
    }
    .item{
      margin: 10px;
      cursor: pointer;
    }
    /* .active{
      background-color: red;
    } */
  </style>
</head>
<body>
  <ul class="list">
    <li class="item active">选项1</li>
    <li class="item">选项2</li>
    <li class="item">选项3</li>
    <li class="item">选项4</li>
    <li class="item">选项5</li>
    <li class="item">选项6</li>
  </ul>
  <script src="jQuery.js"></script>
  <script>
    $('li').click(function(){
      $(this).css('background','red').siblings().css('background','white');
    })
  </script>
<!-- <script>
  // var ul = document.querySelector('.list');
  // var lis = ul.children;
  var lis = document.querySelectorAll('.item');

  // 方式2：先找上一个：先把上一个标签的active类名去掉，再给点击的标签添加active类名
  var lastIndex = 0;//记录上一个具有active类名的标签的索引值，默认为0
  for(var i = 0; i < lis.length; i++){
    lis[i].index = i;
    lis[i].onclick = function(){
      // 1、先移除上一个标签的active类名
      lis[lastIndex].classList.remove('active');

      // 2、给点击的标签添加active类名
      lis[this.index].classList.add('active');
      // this.classList.add('active');
      // 程序执行还未点击，lastIndex是0
      // 第一次：点击选项5，先让选项1移除红色，this.index为4，选项5变红，点击结束时lastIndex应该是4
      // 第二次：点击选项2，先让选项5移除红色，this.index为1，选项2变红，点击结束时lastIndex应该是1
      // 第三次：点击选项6，先让选项2移除红色，this.index为5，选项6变红
      lastIndex = this.index;//点击结束的时候，重新记录lastIndex的值，为下一次点击做准备
    }
  }


  // 方式1：先找所有的：先移除所有标签的active类名，再给点击的标签添加active类名
  // for(var i = 0; i < lis.length; i++){
  //   lis[i].onclick = function(){
  //     // 1、先把所有li标签的active类名移除
  //     for(var i = 0; i < lis.length; i++){
  //       lis[i].classList.remove('active');
  //     }
  //     // 2、给点击的li标签添加active类名
  //     this.classList.add('active');
  //   }
  // }


</script> -->
</body>
</html>